import React, {Children, type ElementType, FC, PropsWithChildren} from 'react';
import {DroppableComponent, IDroppableComponentProps} from '@bastet/widgets'
export { default as settings } from './setting'

const ViewComponent: FC<PropsWithChildren<IDroppableComponentProps>> = (
  { style, children, ...props }
) => {
  const [ Child1 , Child2 ] = children as ElementType[] || []
  console.log('Drop: => ', { style, children, ...props }, children)

  return (
    <DroppableComponent style={{ ...style, display: 'flex'}} {...props}>
      <div><div> name: </div><div>{ Child1 && <Child1/> }</div></div>
      <div><div> age: </div><div>{ Child2 && <Child2/> }</div></div>
    </DroppableComponent>
  )
};

export default ViewComponent
